<template>
    <div>
        <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"
            class="transition duration-300 ease-in-out delay-150">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                    <stop offset="5%" stop-color="#F78DA7"></stop>
                    <stop offset="95%" stop-color="#8ED1FC"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,700 C 0,700 0,140 0,140 C 63.68717948717949,135.0897435897436 127.37435897435898,130.17948717948718 200,116 C 272.625641025641,101.82051282051283 354.18974358974356,78.37179487179489 447,97 C 539.8102564102564,115.62820512820511 643.8666666666667,176.33333333333331 731,186 C 818.1333333333333,195.66666666666669 888.3435897435897,154.29487179487182 974,150 C 1059.6564102564103,145.70512820512818 1160.7589743589745,178.48717948717947 1241,183 C 1321.2410256410255,187.51282051282053 1380.6205128205129,163.75641025641028 1440,140 C 1440,140 1440,700 1440,700 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.265"
                class="transition-all duration-300 ease-in-out delay-150 path-0"></path>

            <defs>
                <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                    <stop offset="5%" stop-color="#F78DA7"></stop>
                    <stop offset="95%" stop-color="#8ED1FC"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,700 C 0,700 0,280 0,280 C 61.84871794871793,293.0076923076923 123.69743589743587,306.0153846153846 197,292 C 270.30256410256413,277.9846153846154 355.0589743589744,236.94615384615383 439,247 C 522.9410256410256,257.05384615384617 606.0666666666666,318.20000000000005 703,325 C 799.9333333333334,331.79999999999995 910.6743589743589,284.25384615384615 1001,277 C 1091.325641025641,269.74615384615385 1161.2358974358974,302.7846153846154 1231,310 C 1300.7641025641026,317.2153846153846 1370.3820512820512,298.60769230769233 1440,280 C 1440,280 1440,700 1440,700 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4"
                class="transition-all duration-300 ease-in-out delay-150 path-1"></path>

            <defs>
                <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                    <stop offset="5%" stop-color="#F78DA7"></stop>
                    <stop offset="95%" stop-color="#8ED1FC"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,700 C 0,700 0,420 0,420 C 94.6846153846154,439.8025641025641 189.3692307692308,459.60512820512815 271,444 C 352.6307692307692,428.39487179487185 421.20769230769224,377.38205128205135 493,376 C 564.7923076923078,374.61794871794865 639.8,422.8666666666666 708,436 C 776.2,449.1333333333334 837.5923076923078,427.15128205128207 927,418 C 1016.4076923076922,408.84871794871793 1133.8307692307692,412.5282051282051 1224,415 C 1314.1692307692308,417.4717948717949 1377.0846153846155,418.7358974358974 1440,420 C 1440,420 1440,700 1440,700 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53"
                class="transition-all duration-300 ease-in-out delay-150 path-2"></path>

            <defs>
                <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                    <stop offset="5%" stop-color="#F78DA7"></stop>
                    <stop offset="95%" stop-color="#8ED1FC"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,700 C 0,700 0,560 0,560 C 88.5025641025641,561.6025641025641 177.0051282051282,563.2051282051282 250,560 C 322.9948717948718,556.7948717948718 380.48205128205126,548.7820512820513 445,533 C 509.51794871794874,517.2179487179487 581.0666666666666,493.66666666666674 676,510 C 770.9333333333334,526.3333333333333 889.251282051282,582.551282051282 982,594 C 1074.748717948718,605.448717948718 1141.9282051282053,572.1282051282051 1214,559 C 1286.0717948717947,545.8717948717949 1363.0358974358974,552.9358974358975 1440,560 C 1440,560 1440,700 1440,700 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
                class="transition-all duration-300 ease-in-out delay-150 path-3"></path>
        </svg>
    </div>
</template>


<style>
.path-0 {
    animation: pathAnim-0 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
    0% {
        d: path("M 0,700 C 0,700 0,140 0,140 C 63.68717948717949,135.0897435897436 127.37435897435898,130.17948717948718 200,116 C 272.625641025641,101.82051282051283 354.18974358974356,78.37179487179489 447,97 C 539.8102564102564,115.62820512820511 643.8666666666667,176.33333333333331 731,186 C 818.1333333333333,195.66666666666669 888.3435897435897,154.29487179487182 974,150 C 1059.6564102564103,145.70512820512818 1160.7589743589745,178.48717948717947 1241,183 C 1321.2410256410255,187.51282051282053 1380.6205128205129,163.75641025641028 1440,140 C 1440,140 1440,700 1440,700 Z");
    }

    25% {
        d: path("M 0,700 C 0,700 0,140 0,140 C 93.7794871794872,155.35384615384615 187.5589743589744,170.7076923076923 260,183 C 332.4410256410256,195.2923076923077 383.5435897435897,204.52307692307693 469,183 C 554.4564102564103,161.47692307692307 674.2666666666667,109.2 763,94 C 851.7333333333333,78.8 909.3897435897436,100.67692307692306 986,117 C 1062.6102564102564,133.32307692307694 1158.174358974359,144.09230769230768 1237,147 C 1315.825641025641,149.90769230769232 1377.9128205128204,144.95384615384614 1440,140 C 1440,140 1440,700 1440,700 Z");
    }

    50% {
        d: path("M 0,700 C 0,700 0,140 0,140 C 83.19230769230768,147.4589743589744 166.38461538461536,154.91794871794875 257,160 C 347.61538461538464,165.08205128205125 445.6538461538461,167.78717948717946 523,177 C 600.3461538461539,186.21282051282054 657,201.93333333333334 717,177 C 777,152.06666666666666 840.3461538461538,86.4794871794872 933,88 C 1025.6538461538462,89.5205128205128 1147.6153846153845,158.14871794871794 1237,178 C 1326.3846153846155,197.85128205128206 1383.1923076923076,168.92564102564103 1440,140 C 1440,140 1440,700 1440,700 Z");
    }

    75% {
        d: path("M 0,700 C 0,700 0,140 0,140 C 96.7051282051282,134.54102564102564 193.4102564102564,129.08205128205128 260,126 C 326.5897435897436,122.9179487179487 363.06410256410254,122.21282051282051 445,114 C 526.9358974358975,105.78717948717949 654.3333333333333,90.06666666666666 752,89 C 849.6666666666667,87.93333333333334 917.6025641025642,101.5205128205128 988,119 C 1058.3974358974358,136.4794871794872 1131.2564102564104,157.85128205128206 1207,162 C 1282.7435897435896,166.14871794871794 1361.371794871795,153.07435897435897 1440,140 C 1440,140 1440,700 1440,700 Z");
    }

    100% {
        d: path("M 0,700 C 0,700 0,140 0,140 C 63.68717948717949,135.0897435897436 127.37435897435898,130.17948717948718 200,116 C 272.625641025641,101.82051282051283 354.18974358974356,78.37179487179489 447,97 C 539.8102564102564,115.62820512820511 643.8666666666667,176.33333333333331 731,186 C 818.1333333333333,195.66666666666669 888.3435897435897,154.29487179487182 974,150 C 1059.6564102564103,145.70512820512818 1160.7589743589745,178.48717948717947 1241,183 C 1321.2410256410255,187.51282051282053 1380.6205128205129,163.75641025641028 1440,140 C 1440,140 1440,700 1440,700 Z");
    }
}
</style>
<style>
.path-1 {
    animation: pathAnim-1 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-1 {
    0% {
        d: path("M 0,700 C 0,700 0,280 0,280 C 61.84871794871793,293.0076923076923 123.69743589743587,306.0153846153846 197,292 C 270.30256410256413,277.9846153846154 355.0589743589744,236.94615384615383 439,247 C 522.9410256410256,257.05384615384617 606.0666666666666,318.20000000000005 703,325 C 799.9333333333334,331.79999999999995 910.6743589743589,284.25384615384615 1001,277 C 1091.325641025641,269.74615384615385 1161.2358974358974,302.7846153846154 1231,310 C 1300.7641025641026,317.2153846153846 1370.3820512820512,298.60769230769233 1440,280 C 1440,280 1440,700 1440,700 Z");
    }

    25% {
        d: path("M 0,700 C 0,700 0,280 0,280 C 98.07435897435897,286.5615384615385 196.14871794871794,293.12307692307695 266,300 C 335.85128205128206,306.87692307692305 377.47948717948725,314.0692307692307 454,312 C 530.5205128205127,309.9307692307693 641.9333333333333,298.6 738,288 C 834.0666666666667,277.4 914.7871794871794,267.5307692307692 997,262 C 1079.2128205128206,256.4692307692308 1162.917948717949,255.27692307692308 1237,259 C 1311.082051282051,262.7230769230769 1375.5410256410255,271.36153846153843 1440,280 C 1440,280 1440,700 1440,700 Z");
    }

    50% {
        d: path("M 0,700 C 0,700 0,280 0,280 C 71.17948717948715,260.61538461538464 142.3589743589743,241.23076923076923 222,234 C 301.6410256410257,226.76923076923077 389.7435897435897,231.69230769230774 467,249 C 544.2564102564103,266.30769230769226 610.6666666666667,295.99999999999994 682,314 C 753.3333333333333,332.00000000000006 829.5897435897434,338.3076923076923 928,331 C 1026.4102564102566,323.6923076923077 1146.9743589743591,302.7692307692308 1236,292 C 1325.0256410256409,281.2307692307692 1382.5128205128203,280.61538461538464 1440,280 C 1440,280 1440,700 1440,700 Z");
    }

    75% {
        d: path("M 0,700 C 0,700 0,280 0,280 C 89.43333333333334,306.73333333333335 178.86666666666667,333.46666666666664 257,318 C 335.1333333333333,302.53333333333336 401.9666666666666,244.86666666666667 467,227 C 532.0333333333334,209.13333333333333 595.2666666666667,231.06666666666666 686,243 C 776.7333333333333,254.93333333333334 894.9666666666667,256.8666666666667 989,254 C 1083.0333333333333,251.13333333333333 1152.8666666666668,243.46666666666664 1224,247 C 1295.1333333333332,250.53333333333336 1367.5666666666666,265.26666666666665 1440,280 C 1440,280 1440,700 1440,700 Z");
    }

    100% {
        d: path("M 0,700 C 0,700 0,280 0,280 C 61.84871794871793,293.0076923076923 123.69743589743587,306.0153846153846 197,292 C 270.30256410256413,277.9846153846154 355.0589743589744,236.94615384615383 439,247 C 522.9410256410256,257.05384615384617 606.0666666666666,318.20000000000005 703,325 C 799.9333333333334,331.79999999999995 910.6743589743589,284.25384615384615 1001,277 C 1091.325641025641,269.74615384615385 1161.2358974358974,302.7846153846154 1231,310 C 1300.7641025641026,317.2153846153846 1370.3820512820512,298.60769230769233 1440,280 C 1440,280 1440,700 1440,700 Z");
    }
}
</style>

<style>
.path-2 {
    animation: pathAnim-2 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-2 {
    0% {
        d: path("M 0,700 C 0,700 0,420 0,420 C 94.6846153846154,439.8025641025641 189.3692307692308,459.60512820512815 271,444 C 352.6307692307692,428.39487179487185 421.20769230769224,377.38205128205135 493,376 C 564.7923076923078,374.61794871794865 639.8,422.8666666666666 708,436 C 776.2,449.1333333333334 837.5923076923078,427.15128205128207 927,418 C 1016.4076923076922,408.84871794871793 1133.8307692307692,412.5282051282051 1224,415 C 1314.1692307692308,417.4717948717949 1377.0846153846155,418.7358974358974 1440,420 C 1440,420 1440,700 1440,700 Z");
    }

    25% {
        d: path("M 0,700 C 0,700 0,420 0,420 C 93.45384615384617,405.1846153846154 186.90769230769234,390.3692307692308 257,383 C 327.09230769230766,375.6307692307692 373.8230769230769,375.7076923076923 458,378 C 542.1769230769231,380.2923076923077 663.8000000000001,384.79999999999995 742,399 C 820.1999999999999,413.20000000000005 854.976923076923,437.0923076923076 930,437 C 1005.023076923077,436.9076923076924 1120.2923076923078,412.8307692307693 1212,406 C 1303.7076923076922,399.1692307692307 1371.853846153846,409.58461538461535 1440,420 C 1440,420 1440,700 1440,700 Z");
    }

    50% {
        d: path("M 0,700 C 0,700 0,420 0,420 C 97.45897435897436,432.6025641025641 194.91794871794872,445.20512820512823 261,455 C 327.0820512820513,464.79487179487177 361.7871794871794,471.78205128205127 439,463 C 516.2128205128206,454.21794871794873 635.9333333333334,429.66666666666674 720,434 C 804.0666666666666,438.33333333333326 852.479487179487,471.55128205128204 927,460 C 1001.520512820513,448.44871794871796 1102.148717948718,392.12820512820514 1192,378 C 1281.851282051282,363.87179487179486 1360.925641025641,391.93589743589746 1440,420 C 1440,420 1440,700 1440,700 Z");
    }

    75% {
        d: path("M 0,700 C 0,700 0,420 0,420 C 59.633333333333354,404.7717948717949 119.26666666666671,389.54358974358973 213,397 C 306.7333333333333,404.45641025641027 434.5666666666667,434.59743589743596 509,440 C 583.4333333333333,445.40256410256404 604.4666666666667,426.06666666666666 684,417 C 763.5333333333333,407.93333333333334 901.5666666666668,409.1358974358974 985,408 C 1068.4333333333332,406.8641025641026 1097.2666666666667,403.3897435897436 1164,405 C 1230.7333333333333,406.6102564102564 1335.3666666666668,413.3051282051282 1440,420 C 1440,420 1440,700 1440,700 Z");
    }

    100% {
        d: path("M 0,700 C 0,700 0,420 0,420 C 94.6846153846154,439.8025641025641 189.3692307692308,459.60512820512815 271,444 C 352.6307692307692,428.39487179487185 421.20769230769224,377.38205128205135 493,376 C 564.7923076923078,374.61794871794865 639.8,422.8666666666666 708,436 C 776.2,449.1333333333334 837.5923076923078,427.15128205128207 927,418 C 1016.4076923076922,408.84871794871793 1133.8307692307692,412.5282051282051 1224,415 C 1314.1692307692308,417.4717948717949 1377.0846153846155,418.7358974358974 1440,420 C 1440,420 1440,700 1440,700 Z");
    }
}
</style>

<style>
.path-3 {
    animation: pathAnim-3 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-3 {
    0% {
        d: path("M 0,700 C 0,700 0,560 0,560 C 88.5025641025641,561.6025641025641 177.0051282051282,563.2051282051282 250,560 C 322.9948717948718,556.7948717948718 380.48205128205126,548.7820512820513 445,533 C 509.51794871794874,517.2179487179487 581.0666666666666,493.66666666666674 676,510 C 770.9333333333334,526.3333333333333 889.251282051282,582.551282051282 982,594 C 1074.748717948718,605.448717948718 1141.9282051282053,572.1282051282051 1214,559 C 1286.0717948717947,545.8717948717949 1363.0358974358974,552.9358974358975 1440,560 C 1440,560 1440,700 1440,700 Z");
    }

    25% {
        d: path("M 0,700 C 0,700 0,560 0,560 C 96.5205128205128,545.1051282051282 193.0410256410256,530.2102564102563 267,537 C 340.9589743589744,543.7897435897437 392.3564102564103,572.2641025641027 474,569 C 555.6435897435897,565.7358974358973 667.5333333333334,530.7333333333332 764,513 C 860.4666666666666,495.26666666666677 941.5102564102563,494.80256410256413 1000,521 C 1058.4897435897437,547.1974358974359 1094.425641025641,600.0564102564102 1164,611 C 1233.574358974359,621.9435897435898 1336.7871794871794,590.9717948717948 1440,560 C 1440,560 1440,700 1440,700 Z");
    }

    50% {
        d: path("M 0,700 C 0,700 0,560 0,560 C 85.95128205128205,566.123076923077 171.9025641025641,572.2461538461538 258,578 C 344.0974358974359,583.7538461538462 430.3410256410257,589.1384615384616 499,592 C 567.6589743589743,594.8615384615384 618.7333333333332,595.1999999999999 697,596 C 775.2666666666668,596.8000000000001 880.7256410256412,598.0615384615384 978,588 C 1075.2743589743588,577.9384615384616 1164.3641025641025,556.5538461538462 1240,550 C 1315.6358974358975,543.4461538461538 1377.8179487179486,551.7230769230769 1440,560 C 1440,560 1440,700 1440,700 Z");
    }

    75% {
        d: path("M 0,700 C 0,700 0,560 0,560 C 69.22564102564101,559.3538461538461 138.45128205128202,558.7076923076922 224,552 C 309.548717948718,545.2923076923078 411.42051282051284,532.5230769230769 489,527 C 566.5794871794872,521.4769230769231 619.8666666666666,523.1999999999999 702,540 C 784.1333333333334,556.8000000000001 895.1128205128207,588.676923076923 987,585 C 1078.8871794871793,581.323076923077 1151.6820512820511,542.0923076923077 1224,532 C 1296.3179487179489,521.9076923076923 1368.1589743589743,540.9538461538461 1440,560 C 1440,560 1440,700 1440,700 Z");
    }

    100% {
        d: path("M 0,700 C 0,700 0,560 0,560 C 88.5025641025641,561.6025641025641 177.0051282051282,563.2051282051282 250,560 C 322.9948717948718,556.7948717948718 380.48205128205126,548.7820512820513 445,533 C 509.51794871794874,517.2179487179487 581.0666666666666,493.66666666666674 676,510 C 770.9333333333334,526.3333333333333 889.251282051282,582.551282051282 982,594 C 1074.748717948718,605.448717948718 1141.9282051282053,572.1282051282051 1214,559 C 1286.0717948717947,545.8717948717949 1363.0358974358974,552.9358974358975 1440,560 C 1440,560 1440,700 1440,700 Z");
    }
}
</style>